import { useEffect } from 'react';
import { Link, TagModelState, useDispatch, useIntl, useSelector } from 'umi';
import styles from './rightlower.less';

export default function Rightlower() {
  const { tag } = useSelector((state: { tag: TagModelState }) => state.tag);

  const dispatch = useDispatch();
  const intl = useIntl();
  useEffect(() => {
    dispatch({
      type: 'tag/getTagList',
    });
  }, []);
  return (
    <div className={styles.rightLower}>
      <div className={styles.rightLowerTitle}>
        <span>{intl.formatMessage({id:'categoryArticle'})}</span>
      </div>
      <div className={styles.rightLowerUl}>
        <ul>
          {tag.map((item) => {
              return (
                <li key={item.id}>
                  <Link to={`/tag/${item.value}`}>
                    {item.label}
                    <span>[{item.articleCount}]</span>
                  </Link>
                </li>
              );
            })}
        </ul>
      </div>
    </div>
  );
}
